<template>
    <div class="com-cnt">
        <div class="havecard">
            <div class="has active">已办卡</div>
            <div class="nocard">未办卡</div>
        </div>
        <div class="box">
            <ul>
                <li v-for="item in list" v-if="item.isVIP == 0?ok:none">
                    <div class="card">
                        <!-- <span>{{item.nickName}}</span> -->
                        <span>{{item.mobile}}</span>
                        <span style="float:right">{{item.createDate}}</span>
                        <!-- <span class='vip'>{{item.isVIP == 0?"已办卡":"未办卡"}}</span> -->
                    </div>
                </li>
            </ul>
            <div class="dz" style='height:49px;'></div>
        </div>
        <div class="box1">
            <ul>
                <li v-for="item in list" v-if="item.isVIP == 1?ok:none">
                    <div class="card">
                        <!-- <span>{{item.nickName}}</span> -->
                        <span>{{item.mobile}}</span>
                        <span style="float:right">{{item.createDate}}</span>
                        <!-- <span class='vip'>{{item.isVIP == 0?"已办卡":"未办卡"}}</span> -->
                    </div>
                </li>
            </ul>
            <div class="dz" style='height:49px;'></div>
        </div>
    </div>
</template>
<script>
import { domain } from '@/assets/js/config'
import $ from 'jquery'
import http from "@/assets/js/axios"
import axios from 'axios'
import Qs from 'qs'
import { maskTips } from '@/assets/js/dom'
export default {
    name: 'yqjlPage',
    data() {
        return {
            list: [],
            ok:true,
            none:false
        }
    },
    mounted() {
        this.getValue();
        this.tabsSwitch();
    },
    methods: {
        tabsSwitch: function () {
            $('.havecard div').click(function(){
                $(this).addClass('active').siblings().removeClass('active');
                if($(this).hasClass('has')){
                    $('.box').show();
                    $('.box1').hide();
                }else{
                    $('.box').hide();
                    $('.box1').show();
                }
            })
        },
        getValue: async function () {
            let userToken = localStorage.getItem("token") || '';
            const res = await http.post('xshk/f/user/invite?token=' + userToken)
            if (res.status == 200) {
                if (res.data.data) {
                    console.log(res.data)
                    console.log(res.data.data)
                    this.list = res.data.data

                } else {
                    this.list.list = []
                }
            }
        },
    },
}
</script>

<style lang="stylus" scoped>
.com-cnt {
    width: 100%;
    height: 100%;
}

.havecard {
    width: 100%;
    height: 0.9rem;
    border-bottom: 1px solid #d1d1d1;
    // margin-top: .92rem;
    text-align: center;
    font-size: 0.24rem;
    color:#999;
}

.havecard .has {
    width: 3.74rem;
    height: 100%;
    line-height: 0.9rem;
    font-family: 'PingFangSC-Regular';
    // border-right: 1px solid #d1d1d1;
    float: left;
}

.havecard .nocard {
    width: 3.74rem;
    height: 100%;
    line-height: 0.9rem;
    font-family: 'PingFangSC-Regular';
    float: left;
}

.box {
    width: 100%;
    height: auto;
}

.box ul {
    width: 100%;
}

.box ul li {
    width: 100%;
    height: 0.97rem;
    border-bottom: 1px solid #d1d1d1;
}

.box ul li div {
    padding: 0 0.4rem;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
}

.box ul li div span {
    display: inline-block;
    line-height: 0.97rem;
    font-size: 0.28rem;
    font-family: 'Adobe Heiti Std R';
    color: #B6B6B6;
    float: left;
    margin-right: 0.12rem;
}
.box1 {
    width: 100%;
    height: auto;
    display:none;
}

.box1 ul {
    width: 100%;
}

.box1 ul li {
    width: 100%;
    height: 0.97rem;
    border-bottom: 1px solid #d1d1d1;
}

.box1 ul li div {
    padding: 0 0.4rem;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    text-align: center;
}

.box1 ul li div span {
    display: inline-block;
    line-height: 0.97rem;
    font-size: 0.28rem;
    font-family: 'Adobe Heiti Std R';
    color: #B6B6B6;
    float: left;
    margin-right: 0.12rem;
}
.active {
    color: #8FC31F;
    border-bottom: 2px solid #8FC31F;
}
</style>